.domains-count {
    padding: 10px 18px;
    font-size: 18px;
    line-height: 26px;
    color: #246;
    text-align: center;
    background-color: #e2eef9;
    border: 1px solid #bac6d3;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px
}

.domains-module {
    margin: 0
}

.module-list.domain .slogan {
    text-align: center;
    margin-top: -8px;
    width: 60px
}

.module-list.domain .title {
    margin-left: 80px
}

.article .nav {
    position: fixed;
    top: 0
}

.article .article-body .wrapper,
.article .main .wrapper {
    display: block;
    max-width: 768px
}

.article .main {
    min-height: inherit;
    background-color: rgba(0, 0, 0, 0.02)
}

.article .article-body {
    padding: 68px 0 20px
}

.article .article-info {
    font-size: 12px;
    line-height: 20px
}

.article .article-info .article-actions {
    line-height: 60px;
    font-size: 13px
}

.article h1.article-title {
    word-break: break-word;
    font-size: 28px;
    font-weight: normal;
    padding-top: 15px;
    text-align: center
}

.article h1.article-title svg {
    height: 28px;
    width: 28px;
    vertical-align: -4px
}

.article .article-content {
    padding-top: 15px
}

.article #articleRewardContent {
    padding: 15px 15px 41px 15px;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.9)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.9)), color-stop(0.75, rgba(255, 255, 255, 0.9)), color-stop(0.75, transparent), to(transparent));
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);
    background-color: #f7f7f7;
    background-size: 45px 45px;
    position: relative
}

.article #articleRewardContent .vditor-reset>p {
    margin-bottom: 0
}

.article #articleRewardContent>span {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer
}

.article .share {
    position: fixed;
    top: 50%;
    left: 120px;
    width: 30px;
    font-size: 22px;
    color: #616161;
    text-align: center;
    margin-top: -117px
}

.article .share .article-clipboard {
    position: absolute;
    top: -100000px
}

.article .share svg {
    height: 22px;
    width: 22px
}

.article .share>span {
    display: block;
    margin-bottom: 10px
}

.article .share #qrCode {
    position: absolute;
    top: 87px;
    left: 35px;
    border: 5px solid #eee;
    z-index: 1;
    height: 90px;
    border-radius: 3px;
    width: 90px
}

.article .share #thankArticle .ft-13 {
    margin-top: -3px;
    display: block
}

.article .article-header {
    height: 48px;
    width: 100%;
    position: fixed;
    z-index: 83;
    display: flex;
    line-height: 38px;
    padding: 0 10px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    top: -50px
}

.article .article-header h1 svg {
    color: rgba(0, 0, 0, 0.87);
    vertical-align: baseline;
    height: 48px;
    width: 48px
}

.article .article-header h2 {
    font-size: 24px;
    line-height: 48px;
    font-weight: normal;
    flex: 1;
    margin: 0 20px;
    transition: margin 1s cubic-bezier(0, 0, 0.2, 1)
}

.article .article-header .user-nav>span,
.article .article-header .user-nav>a {
    float: left;
    padding: 16px 10px;
    line-height: 16px;
    height: 16px;
    color: #616161;
    text-decoration: none
}

.article .article-header .user-nav>span:hover,
.article .article-header .user-nav>a:hover {
    color: rgba(0, 0, 0, 0.87)
}

.article .article-header .user-nav>span.ft-red {
    color: #d23f31
}

.article .article-header .user-nav svg {
    height: 16px;
    width: 16px
}

.article #articleToC {
    position: fixed;
    top: 48px;
    width: 20%;
    z-index: 79;
    right: 0;
    height: 100%;
    border-radius: 0;
    background-color: #f1f7fe
}

.article #articleToC .module-panel {
    overflow: auto;
    border-radius: 0
}

.article #articleToC .article-toc li {
    list-style-type: none
}

.article #articleToC .article-toc li a {
    padding: 5px 10px 5px 20px;
    border-left: 2px solid transparent;
    display: block;
    line-height: 20px;
    color: #767676
}

.article #articleToC .article-toc li a:last-child {
    border-bottom-width: 0
}

.article #articleToC .article-toc li a:hover {
    border-left: 1px solid #4285f4;
    background-color: #F7F7F7;
    padding-left: 21px;
    color: #4285f4;
    text-decoration: none
}

.article #articleToC .article-toc li.current a {
    border-left: 2px solid #4285f4;
    background-color: #f0f0f0;
    color: #4285f4
}

.article #articleToC .article-toc li.toc-h2 a,
.article #articleToC .article-toc li.toc-h2.current a:hover {
    padding-left: 34px
}

.article #articleToC .article-toc li.toc-h3 a,
.article #articleToC .article-toc li.toc-h3.current a:hover {
    padding-left: 48px
}

.article #articleToC .article-toc li.toc-h4 a,
.article #articleToC .article-toc li.toc-h4.current a:hover {
    padding-left: 62px
}

.article #articleToC .article-toc li.toc-h5 a,
.article #articleToC .article-toc li.toc-h5.current a:hover {
    padding-left: 86px
}

.article #articleToC .article-toc li.toc-h2 a:hover {
    padding-left: 35px
}

.article #articleToC .article-toc li.toc-h3 a:hover {
    padding-left: 49px
}

.article #articleToC .article-toc li.toc-h4 a:hover {
    padding-left: 63px
}

.article #articleToC .article-toc li.toc-h5 a:hover {
    padding-left: 87px
}

.article #revision .revisions {
    margin: 5px 0 15px;
    text-align: center
}

.article #revision .revisions a {
    color: #616161;
    vertical-align: middle
}

.article #revision .revisions a:hover {
    color: rgba(0, 0, 0, 0.87)
}

.article #revision .revisions a.disabled {
    color: rgba(0, 0, 0, 0.38);
    cursor: default
}

.article #revision .revisions span {
    margin: 0 10px 0 10px
}

.article .editor-panel {
    position: fixed;
    width: 100%;
    z-index: 120;
    height: 100%;
    box-sizing: border-box;
    bottom: -200%
}

.article .editor-panel .editor-bg {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.article .editor-panel .wrapper {
    background-color: #f1f7fe;
    bottom: 0;
    z-index: 121;
    position: absolute;
    padding: 15px 10%;
    box-sizing: border-box;
    width: 100%;
    max-width: initial
}

.article .editor-panel .form {
    width: 100%
}

.article .editor-panel .editor-hide {
    color: #616161;
    margin: -3px 0 6px;
    font-size: 22px
}

.article .editor-panel .editor-hide:hover {
    color: rgba(0, 0, 0, 0.87)
}

#heatBar {
    position: fixed;
    top: 2px;
    right: 0px;
    width: 100%;
    z-index: 84
}

#thoughtProgress {
    height: 2px;
    position: relative;
    margin-bottom: 10px;
    margin-top: 20px
}

#thoughtProgress .bar {
    position: absolute;
    background-color: #e0e0e0;
    height: 2px
}

#thoughtProgress .icon-video {
    position: absolute;
    top: -8px;
    left: 0;
    cursor: pointer;
    color: #d23f31;
    margin-left: -10px
}

label.cmt-anonymous {
    margin: 0 20px 0 0;
    line-height: 33px
}

.action-btns>span,
.action-btns>a {
    color: #616161;
    text-decoration: none
}

.action-btns>span:hover,
.action-btns>a:hover {
    color: rgba(0, 0, 0, 0.87)
}

.action-btns>span.ft-red,
.action-btns>a.ft-red,
.action-btns>span.ft-red:hover,
.action-btns>a.ft-red:hover {
    color: #d23f31
}

.action-btns>span.icon-reply-btn {
    color: #616161;
    font-weight: bold
}

.action-btns>span.icon-reply-btn:hover {
    color: rgba(0, 0, 0, 0.87)
}

.action-btns svg {
    vertical-align: text-top
}

.comments.module {
    margin-bottom: 0
}

.comments .comments-header a {
    color: rgba(0, 0, 0, 0.38);
    font-size: 16px;
    text-decoration: none
}

.comments .comments-header a:hover {
    color: rgba(0, 0, 0, 0.54)
}

.comments .list>ul>li.cmt-shield-shield {
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.9)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.9)), color-stop(0.75, rgba(255, 255, 255, 0.9)), color-stop(0.75, transparent), to(transparent));
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.9) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, transparent 75%, transparent);
    background-color: #f7f7f7;
    background-size: 45px 45px
}

.comments .list>ul>li.cmt-perfect,
.comments .list>ul>li.cmt-perfect:hover {
    background-color: #f9f6f6
}

.comments .list>ul>li:hover .hover-show,
.comments .list>ul>li.focus .fn-hidden {
    visibility: visible
}

.comments .list>ul>li:last-child {
    border-bottom-width: 0
}

.comments .comment {
    margin: 5px 0
}

.comments .comment>p:last-child {
    margin-bottom: 0px
}

.comments .comment>p>img:last-child {
    margin-bottom: 10px
}

.comments .comment-info .avatar-small {
    vertical-align: bottom
}

.comments .comment-info a:hover {
    text-decoration: none
}

.comments .comment-action>.ft-fade>.fn-pointer:hover {
    color: rgba(0, 0, 0, 0.54)
}

.nice .comments>ul>li:last-child {
    border-bottom-width: 0
}

.comment-get-comment.list>ul {
    padding: 0
}

.comment-get-comment.list>ul>li {
    padding-top: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px
}

.comment-get-comment.list>ul>li:last-child {
    border-bottom: 1px solid #eee
}

.comment-replies.list>ul {
    margin-top: 10px;
    padding: 0
}

.comment-replies.list>ul>li {
    border-bottom-width: 0;
    border-top: 1px solid #eee
}

.comment-replies.list>ul>li {
    background-color: transparent
}

#replyUseName {
    line-height: 20px;
    height: 20px
}

.img-preview {
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 111;
    overflow: auto;
    cursor: zoom-out;
    transition: background-color .2s ease-in-out
}

.img-preview img {
    max-width: inherit;
    transition: transform .3s ease-in-out
}

.article-footer {
    margin-top: 20px;
    max-width: 768px
}

.article-footer .module {
    margin-left: 20px
}

.article-footer .module:first-child {
    margin-left: 0
}

#reportDialog {
    display: none
}

.article-list ul>li {
    padding: 15px
}

.article-list .stick li:last-child {
    border-bottom-width: 0
}

.article-list ul>li>h2 {
    margin: 5px 0
}

.article-list ul>li>h2>a {
    font-size: 16px;
    font-weight: 700
}

.article-list ul>li:hover .fn-hidden {
    visibility: visible
}

.article-list .abstract {
    margin-top: 5px;
    color: #616161;
    display: block;
    text-decoration: none
}

.article-list .abstract-img {
    width: 180px;
    height: 135px;
    border-radius: 2px;
    margin-left: 10px;
    background-size: cover;
    background-position: center center
}

.article-list ul>li>h2>a:visited,
.article-list .abstract:visited {
    color: #999
}

.article-list .author {
    color: #616161;
    font-weight: 600
}

.article-list .list-info {
    line-height: 18px
}

.heat {
    position: absolute;
    height: 5px;
    background-color: #d23f31;
    z-index: 1;
    bottom: -3px;
    right: 0
}

.point,
.point-remove {
    position: absolute;
    height: 5px;
    background-color: #d23f31;
    z-index: 1;
    bottom: -3px;
    right: 0px;
    width: 5px;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

.point-remove {
    animation-name: slideInLeft;
    -webkit-animation-name: slideInLeft
}

@keyframes slideInLeft {
    0% {
        right: 0
    }

    100% {
        right: 100%
    }
}

@-webkit-keyframes slideInLeft {
    0% {
        right: 0
    }

    100% {
        right: 100%
    }
}

@keyframes slideInRight {
    0% {
        right: 100%
    }

    100% {
        right: 0
    }
}

@-webkit-keyframes slideInRight {
    0% {
        right: 100%
    }

    100% {
        right: 0
    }
}

.article-level0 {
    color: rgba(0, 0, 0, 0.38)
}

.article-level1 {
    color: #ffcc00
}

.article-level2 {
    color: #ffc1cc
}

.article-level3 {
    color: #ff6633
}

.article-level4 {
    color: #d23f31
}

.recent-rss {
    color: #ff9933 !important;
    float: right;
    margin: 2px 0 0 10px
}

.recent-rss:hover {
    color: #4285f4 !important
}

.domain-rss {
    color: #ff9933 !important
}

.domain-rss svg {
    vertical-align: sub
}

.domain-rss:hover {
    color: #4285f4 !important
}

.verify {
    background-color: #fff
}

.verify .intro {
    padding: 100px 50px;
    background-color: #f1f7fe;
    width: 40%;
    color: #616161
}

.verify .verify-wrap {
    width: 60%
}

.verify .form {
    font-size: 14px;
    line-height: 1.6;
    width: 250px;
    margin: 100px auto
}

.verify .form>svg {
    margin: 0 auto;
    display: block;
    height: 100px;
    width: 100px
}

.verify .form input[type="text"],
.verify .form input[type="password"] {
    margin: 10px 0;
    width: 100%;
    padding-left: 36px;
    background-color: #FFF
}

.verify .form button {
    margin: 10px 0;
    width: 100%
}

.verify .form .input-wrap {
    position: relative
}

.verify .form .input-wrap svg {
    color: rgba(0, 0, 0, 0.54);
    position: absolute;
    top: 19px;
    left: 10px
}

.verify .form .captcha-img {
    top: 11px;
    position: absolute;
    height: 31px;
    left: 1px;
    border-radius: 3px 0 0 3px
}

.verify .form input.captcha-input {
    padding-left: 91px
}

.guide .guide-tab,
.guide .step-btn {
    margin: 50px
}

.guide .guide-tab svg {
    height: 100px;
    width: 100px
}

.guide .form {
    margin: 0;
    width: auto
}

.guide #avatarUpload label {
    margin-top: 0
}

.guide .tag-desc>li {
    margin: 0 20px 20px 0
}

.guide .tag-desc>li>div {
    left: -3px;
    right: inherit;
    border-radius: 0px 3px 3px 3px
}

.guide .tag-desc li.current>a {
    background-color: #4285f4;
    color: #fff;
    border-color: rgba(0, 0, 0, 0.02)
}

.guide .intro dl {
    margin-left: 50px
}

.guide .intro dd {
    margin-bottom: 50px
}

.guide .intro dt {
    position: relative
}

.guide .intro dt.current {
    color: #ffac45
}

.guide .intro dt .index {
    position: absolute;
    left: -38px;
    font-size: 46px;
    top: -13px;
    font-family: serif;
    font-weight: 600
}

.guide .fn-flex>div {
    padding: 10px;
    width: 50%
}

.guide .md {
    background-color: #f1f7fe
}

.guide .md pre {
    white-space: pre-wrap;
    word-wrap: break-word
}

.tag-articles .article-info {
    padding: 15px 15px 0;
    margin-bottom: 15px
}

.tag-articles .desc,
.tag-articles .tag-articles-tag-desc.tag-desc {
    margin: 0 15px
}

.tag-articles .tag-articles-tag-desc.tag-desc>li {
    margin: 0 15px 15px 0
}

.tag-articles .tag-articles-tag-desc.tag-desc>li>div {
    left: -3px;
    right: auto;
    border-radius: 0 3px 3px 3px
}

code.prettyprint {
    display: inline;
    border: none;
    background-color: initial;
    border-radius: initial;
    padding: initial
}

code .str {
    color: initial
}

code .kwd {
    color: initial
}

code .com {
    color: initial;
    font-style: italic
}

code .typ {
    color: initial
}

code .lit {
    color: initial
}

code .pun {
    color: initial
}

code .pln {
    color: initial
}

code .tag {
    color: initial
}

code .atn {
    color: initial
}

code .atv {
    color: initial
}

code .dec {
    color: initial
}

.activity {
    min-height: 300px
}

.activity .list .ft-fade {
    margin-top: 6px;
    display: block
}

#charCanvas {
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    display: block;
    background-image: url(../images/m-char.png);
    background-size: cover;
    margin: 20px auto
}

#snakeCanvas,
#gobangCanvas {
    margin: 20px auto;
    display: block
}

.snak-rank {
    margin: 30px 15px 0
}

.snak-rank .module:last-child {
    margin-left: 20px;
    margin-bottom: 20px
}

.snak-rank .count {
    position: absolute;
    top: 10px;
    right: 10px
}

.sub-head .avatar-small {
    height: 24px;
    width: 24px;
    vertical-align: -3px
}

.sub-head .ft-13 {
    font-weight: normal
}

.chat-room .online-cnt {
    line-height: 33px;
    margin-right: 10px;
    color: rgba(0, 0, 0, 0.54)
}

.chat-room .list {
    height: 200px;
    overflow: auto
}

.chat-room .form.fn-content {
    background-color: #f1f7fe
}

.index .index-main {
    width: 60%
}

.index .index-side {
    margin-left: 2px;
    width: 40%
}

.index .article-list .heat {
    display: none
}

.index .more {
    display: block;
    text-align: right
}

.index .index-tabs>span {
    flex: 1;
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    cursor: pointer;
    transform: translateZ(0);
    backface-visibility: hidden;
    position: relative;
    transition-property: color;
    transition-duration: .3s;
    text-align: center;
    border-bottom: 2px solid #4285f4;
    background-color: #FFF;
    color: rgba(0, 0, 0, 0.54);
    overflow: hidden
}

.index .index-tabs>span a {
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
    display: block
}

.index .index-tabs>span a svg {
    vertical-align: text-bottom
}

.index .index-tabs>span.current,
.index .index-tabs>span.current:hover {
    color: rgba(0, 0, 0, 0.87)
}

.index .index-tabs>span.tags {
    border-bottom-color: #569e3d;
    margin: 0 2px
}

.index .index-tabs>span.users {
    border-bottom-color: #f1e05a
}

.index .index-tabs>span.perfect {
    border-bottom-color: #d23f31
}

.index .index-tabs>span.check {
    border-bottom-color: #563d7c;
    margin: 0 2px
}

.index .index-tabs>span.post {
    border-bottom-color: #ffac45
}

.index .index-tabs>span:hover,
.index .index-tabs>span:hover a {
    color: #fff
}

.index .index-tabs>span:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4285f4;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .3s ease-out
}

.index .index-tabs>span.tags:before {
    background-color: #569e3d
}

.index .index-tabs>span.users:before {
    background-color: #f1e05a
}

.index .index-tabs>span.perfect:before {
    background-color: #d23f31
}

.index .index-tabs>span.check:before {
    background-color: #563d7c
}

.index .index-tabs>span.post:before {
    background-color: #ffac45
}

.index .index-tabs>span:hover:before {
    transform: scaleY(1)
}

.index .index-tabs>span.current:hover:before {
    transform: scaleY(0)
}

.index .index-tabs>span>svg {
    display: none;
    vertical-align: text-top
}

.index .index-tabs>span.current>svg {
    display: inline-block
}

.index .perfect-panel {
    background-color: #f1f7fe
}

.index .perfect-panel .avatar-small {
    position: absolute;
    left: 10px
}

.index .perfect-panel .fn-ellipsis {
    padding: 0 50px 0 30px;
    display: block;
    box-sizing: border-box;
    line-height: 20px
}

.index .perfect-panel .count {
    position: absolute;
    right: 10px;
    top: 17px
}

.index .metro-item {
    flex: 1;
    height: 200px;
    text-align: center;
    overflow: hidden;
    position: relative;
    margin-right: 2px;
    margin-bottom: 2px
}

.index .metro-item .preview {
    height: 100%;
    width: 100%;
    padding-top: 50%;
    position: relative;
    box-sizing: border-box;
    display: block;
    transition: all 0.2s ease-out 0s;
    color: #999;
    text-decoration: none
}

.index .metro-item .preview:hover {
    background-color: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.87)
}

.index .metro-item .preview img {
    transition: all 0.2s ease-out 0s;
    margin-top: -48px;
    height: 60px;
    width: 60px
}

.index .metro-item .preview:hover>img {
    border-radius: 30px
}

.index .metro-item .preview>b {
    display: block;
    margin-top: 20px;
    font-weight: normal
}

.index__bottom {
    background-color: rgba(0, 0, 0, 0.02);
    padding-top: 20px;
    margin-top: 20px
}

.index .metro-border>div {
    height: 2px;
    flex: 1;
    background-color: #4285f4;
    margin-right: 2px;
    margin-top: -2px
}

.index .metro-border>div.yellow {
    background-color: #f1e05a
}

.index .metro-border>div.green {
    background-color: #569e3d
}

.index .metro-border>div.red {
    background-color: #d23f31
}

.index .metro-border>div.purple {
    background-color: #563d7c
}

.index .ad img {
    width: 100%
}

@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0
    }
}

.ripple {
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 100%;
    transform: scale(0);
    pointer-events: none;
    animation: ripple .75s ease-out;
    content: " ";
    width: 100%;
    height: 100%
}

.symhub li a {
    color: #616161;
    vertical-align: middle;
    font-size: 16px;
    line-height: 20px
}

.symhub li:last-child {
    border-bottom: 0
}

.top-ranking {
    border-top: 1px solid #eee;
    padding-top: 15px
}